<template>
	<div class="flex app-text-react" @click.stop="onClick">
		<sports-icon v-if="sportId" :sportId="sportId" class="relative -top-[2px]" />
		<div class="ml-[2px] leading-[14px]">{{ leagueName }}</div>
	</div>
</template>

<script lang="ts" setup>
import SportsIcon from '../../sports/sports-icon/index.vue'
import { PropType } from 'vue'
import { SportsType } from '@/enums'
import { goSportsLeague } from '@/utils'
const props = defineProps({
	sportId: {
		type: String as PropType<SportsType>
	},
	leagueId: {
		type: String,
		default: ''
	},
	leagueName: {
		type: String,
		default: ''
	}
})

const onClick = () => {
	if (props.sportId && props.leagueId) {
		goSportsLeague(props.sportId, props.leagueId)
	}
}
</script>
